import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:hi_flutter/app_page.dart';

class StateDemoPage extends StatelessWidget {
  const StateDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const AppPage(
      body: Center(
        child: Column(
          children: [
            TapBoxA(),
            SizedBox(width: 200, height: 16),
            TapBoxBParent(),
            SizedBox(width: 200, height: 16),
            TapBoxCParent()
          ],
        ),
      ),
    );
  }
}

class TapBoxA extends StatefulWidget {
  const TapBoxA({super.key});

  @override
  State<TapBoxA> createState() => _TapBoxAState();
}

class _TapBoxAState extends State<TapBoxA> {
  bool _active = false;

  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: _active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
        child: Center(
          child: Text(
            _active ? 'Active' : 'Inactive',
            style: const TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
      ),
    );
  }
}


class TapBoxBParent extends StatefulWidget {
  const TapBoxBParent({super.key});

  @override
  State<TapBoxBParent> createState() => _TapBoxBParentState();
}

class _TapBoxBParentState extends State<TapBoxBParent> {
  
  bool _active = false;

  void _handleTap(newValue) {
    setState(() {
      _active = newValue;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return TapBoxB(active: _active, onChanged: _handleTap);
  }
}



class TapBoxB extends StatelessWidget {

  final bool active;
  final ValueChanged<bool> onChanged;

  const TapBoxB({super.key, required this.active, required this.onChanged});


  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: ()=>{
        onChanged(!active)
      },
      child: Container(
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
        child: Center(
          child: Text(
            active ? 'Active' : 'Inactive',
            style: const TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
      ),
    );
  }
}


class TapBoxCParent extends StatefulWidget {
  const TapBoxCParent({super.key});

  @override
  State<TapBoxCParent> createState() => _TapBoxCParentState();
}

class _TapBoxCParentState extends State<TapBoxCParent> {

  bool _active = false;

  void _handleTap(newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return TapBoxC(active: _active, onChanged: _handleTap);
  }
}




class TapBoxC extends StatefulWidget {

  final bool active;
  final ValueChanged<bool> onChanged;

  const TapBoxC({super.key, required this.active, required this.onChanged});

  @override
  State<TapBoxC> createState() => _TapBoxCState();
}

class _TapBoxCState extends State<TapBoxC> {

  bool _highlight = false;

  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap() {
    widget.onChanged(!widget.active);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: _handleTapDown, // 处理按下事件
      onTapUp: _handleTapUp, // 处理抬起事件
      onTapCancel: _handleTapCancel,
      onTap: _handleTap,
      child: Container(
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: widget.active ? Colors.lightGreen[700] : Colors.grey[600],
          border: _highlight
              ? Border.all(
            color: Colors.teal,
            width: 10.0,
          ) : null,
        ),
        child: Center(
          child: Text(
            widget.active ? 'Active' : 'Inactive',
            style: const TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
      ),
    );
  }
}


